<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
</head>
<body>
    <div id="app">
        <pre v-pre class="note">
        插件开发：vue提供一个固定应用方法，让vue程序可以以链式方式完成全局功能装载
                 提供独立全局文件的加载方式
        插件定义语法：
        // plugins 定义
        {
            install:function(app,options){
                /*
                app:当前安装插件的Vue应用程序实例对象，通过该对象可以扩展全局配置等相关功能
                options:当前安装插件时提供的额外参数数据
                */
                console.log("app:",app);
                console.log("options:",options);
            }
        }
        // 或者
        function 方法名(app,options){
            console.log("app:",app);
            console.log("options:",options);
        }
        加载语法
        createApp({})
        // 先安装插件
        .use(插件方法或对象,{msg:"参数"})
        // 再挂载应用
        .mount("#app");
        </pre>
        <p v-test>全局指令</p>
        <test-comp></test-comp>
    </div>
    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        // const app = createApp({
        //     data() {
        //         return {
                    
        //         }
        //     }
        // })
        // let a = app.use( {
        //     install:function(app){
        //         app.component("TestComp",{
        //             template:`
        //             <div class="cbox">全局组件TestComp</div>
        //             `
        //         })
        //     }
        // } )
        // app.mount("#app")
        // console.log(a==app)

        // ===>
        // createApp({
        //     data() {
        //         return {
                    
        //         }
        //     }
        // }).use( {
        //     install:function(app){
        //         app.component("TestComp",{
        //             template:`
        //             <div class="cbox">全局组件TestComp</div>
        //             `
        //         })
        //     }
        // } ).use( {
        //     install:function(app){
        //         app.directive("test",function(el){
        //             el.style.color="blue";
        //         })
        //     }
        // } )
        // .mount("#app")

        // ==>
        import compoent from "./04.compoent.js"
        import directive from "./04.directive.js"
        createApp({
            data() {
                return {
                    
                }
            }
        })
        .use(compoent,{msg:"额外参数"})
        .use(directive)
        .mount("#app")
    </script>
</body>
</html>